<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/style.css}" />
    <script type="text/javascript" th:src="@{/Hospital/Js/jquery.js}"></script>
    <!--<script type="text/javascript" th:src="@{/Hospital/assets/js/jquery-1.6.js}"></script>-->
    <!--<script type="text/javascript" th:src="../Js/jquery.sorted.js"></script>-->
    <script type="text/javascript" th:src="@{/Hospital/Js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/ckform.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/common.js}"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    
     <script type="text/javascript">
     $(function () {
		$('#newNav').click(function(){
				window.location.href="addRole";
		 });
    });


     //更新
     function edit(id){
         //并将id号给转发出去
         window.location.href="editRole?id="+id;

     }
     //删除一个

     function delOne(id){
         if(confirm("确认删除?")){

             $.post("delete",{id:id},function (date){

                 if (date.status === 1){
                     //删除成后重新刷新页面
                     window.location.reload();
                 }
             })

         }
     }
	
	
    function checkall(){
			var alls=document.getElementsByName("check");
			var ch=document.getElementById("checkall");
			if(ch.checked){
				for(var i=0;i<alls.length;i++){
					alls[i].checked=true;	
				}	
			}else{
				for(var i=0;i<alls.length;i++){
					alls[i].checked=false;	
				}	
			}
		}

     function delAll(){
         var alls=document.getElementsByName("check");
         var ids=new Array();
         for(var i=0;i<alls.length;i++){
             if(alls[i].checked){
                 //将被选中的条目获取其id值，然后放到数组ids中
                 ids.push(alls[i].id);
             }
         }

         if(ids.length>0){

             if(confirm("确认删除?")){
                 //遍历数组，调取删除方法，循环删除数据
                 ids.forEach(function (id,index){

                     $.post("delete",{id:id},function (date){
                         if (date.status === -1){
                             //删除失败的数据做个提示
                             alert(id+"删除失败！");
                         }
                     })

                 })
                 alert("批量删除成功~");
                 window.location.reload();

             }

         }else{
             alert("请选中要删除的项");
         }
     }

    </script>   
    
</head>
<body>
<form class="form-inline definewidth m20" method="get">
    角色名称：
    <input type="text" name="roleName" id="roleName" class="abc input-default" placeholder="" value="">&nbsp;&nbsp;
    <button type="button" onclick="getName()" class="btn btn-primary" >查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>角色名称</th>
        <th>状态</th>
        <th width="10%">操作</th>
    </tr>
    </thead>

    <tbody id="tbody">
    <!--数据展示部分-->
    </tbody>

</table>
        
        
   <table class="table table-bordered table-hover definewidth m10" >
  	<tr>
        <th colspan="5">
            <div class="inline pull-right page" id="pageNum">
                <!--分页跳转显示部分-->
            </div>
            <div>
                <button type="button" class="btn btn-success" id="newNav">添加角色 </button>&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button>
            </div>
        </th>
    </tr>
  </table>     
 </body>
</html>
<script>

    //数据展示和分页
    function showData(currentPage,data){
        //浏览器打印数据
        //console.log(data);
        //展示内容
        let itemList = "";
        let pageInfo = data.pageInfo;
        //总数据条数
        let total = pageInfo.total;
        //总页数
        let pageNums = pageInfo.pages;
        //当前页
        let pageIndex = pageInfo.pageNum;

        let roleList = pageInfo.list;
        for (let i = 0;i < roleList.length;i++){
            let id = roleList[i].r_id;
            let roleName = roleList[i].r_name;
            let roleState = roleList[i].r_state === 0?'启用':'禁用';

            let item = '<tr>\n' +
                '         \t<td style="vertical-align:middle;">' +
                '<input type="checkbox" name="check" id="'+id+'" value="1"></td>\n' +
                '            <td>'+roleName+'</td>\n' +
                '            <td>'+roleState+'</td>\n' +
                '            <td>\n' +
                '                <a href="javascript:edit('+id+')">更新</a>&nbsp;&nbsp;&nbsp;\n' +
                '                <a href="javascript:delOne('+id+')">删除</a> </td>\n' +
                '        </tr>'

            itemList += item;
        }

        $("#tbody").html(itemList);

        /*页码展示
        * 一共展示6个页码
        * 如果前边不3个，后面补齐，一直到只展示6个
        * 如果后边不足2个， 前面补齐，一直到只展示6个
        * */
        //如果没有传入当前页，默认值为1
        if (currentPage == null){
            currentPage = 1;
        }

        //上一页
        let prePage = currentPage -1;

        //下一页
        let nextPage = currentPage + 1;

        //定义开始位置begin,定义结束位置end
        let begin;
        let end;

        //总页码不够6页
        if (pageNums <= 6){
            begin = 1;
            end = pageNums;
        }else {
            //总页码超过6页
            begin = currentPage - 3;
            end = currentPage + 2;

            //如果前面不够三个，后面补齐，一直展示6个
            if (begin < 1){
                begin = 1;
                end = pageNums;
            }
            //如果后面不足2个，前面补齐，一直到展示6个
            if (end > pageNums){
                end = pageNums;
                begin = end - 5;
            }

        }

        //展示页码
        let pages = '总共'+total+'条记录\n' +
            '            当前为第'+pageIndex+'页/总共'+pageNums+'页';
        //判断当前页是否为首页
        if (currentPage === 1){
            //使链接不生效,并高亮
            pages += '<a href="#" id="haha"><span style="color: #9d9d9d">首页</span></a>\n';
            //使链接不生效
            pages += '<a href="#" style="color: #9d9d9d">上一页</a>\n';
        }else {
            pages += '<a href="javascript:getName(1)">首页</a>\n';
            pages += '<a href="javascript:getName(' + prePage + ')">上一页</a>\n';
        }

        //循环添加6个数字跳转页
        for(let j = begin; j <= end; j++) {
            //标签的href内容不能写成href="getBlogContent",这样就会是同步请求，页面会刷新，不会返回页面，而是json数据（pageInfo）
            // var li = '<a href="javascript:load('+ j +')">' + j +  '</a>\n';

            //判断当前页是否为j
            if(currentPage === j){
                page = '<a href="#">' + '<span class="current">'+ j +'</span>'+'</a>';
            }else{
                page = '<a href="javascript:getName('+ j +')">' + j +  '</a>\n';
            }
            pages += page;
        }

        //判断当前页是否为尾页
        if (currentPage === pageNums){
            //使链接不生效
            pages += '<a href="#" style="color: #9d9d9d">下一页</a>\n';
            //使链接不生效,并高亮
            pages += '<a href="#"><span style="color: #9d9d9d">尾页</span></a>';
        }else {
            pages += '<a href="javascript:getName(' + nextPage + ')">下一页</a>\n';
            pages += '<a href="javascript:getName('+pageNums+')">尾页</a>';
        }


        $("#pageNum").html(pages);

        /*定位到顶部*/
        window.scrollTo(0, 0);
    }
</script>
<script>

    //默认触发函数
    $(function (){
        getName();
    });

    //分页加载数据currentPage为当前页
    //即为点击事件也为默认触发事件
    function getName(currentPage){
        let roleName = $("#roleName").val();
        $.get("pageInfoByName",{pageNum: currentPage,roleName: roleName},function (data){
            showData(currentPage,data);
        });
    }


</script>